<template>
	<div class="big-container" style="padding: 20px 0;">
		<div class="container-content inner-box">
			<div class="start-layout top-bread">
				<i class="el-icon-location"></i>
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: '/agencySet', query: { id: '1817830386937192448' } }">{{ routeName
					}}</el-breadcrumb-item>
					<el-breadcrumb-item v-if="currentObj.dictLabel != routeName">{{ currentObj.dictLabel
					}}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div style="padding-top: 20px;">
				<el-row :gutter="30">
					<el-col :span="5">
						<div class="left-content">
							<div @click="changeMenu(item)" v-for="(item, index) in menuList" :key="index"
								:class="currentObj.dictCode == item.dictCode ? 'tabItem-active' : 'tabItem-empty'"
								class="tabItem-item one_line">
								{{ item.dictLabel }}
							</div>
						</div>
					</el-col>
					<el-col :span="19">
						<div class="right-content">
							<div class="inner-title start-layout">
								<div class="inner-name">{{ currentObj.dictLabel }}
									<div class="inner-line"></div>
								</div>
							</div>
							<el-empty v-if="dataList.length == 0" :image-size="200"></el-empty>
							<div class="dept-area" v-if="currentObj.dictCode == '1817835094997295104'">
								<div style="flex-wrap: wrap;display: flex;align-items: flex-start;justify-content: flex-start;"
									v-if="!showDept">
									<div @click="getDeptList(item)" v-for="(item, index) in dataList" :key="index"
										class="dept-item">{{ item.title }}
									</div>
								</div>
								<div v-if="showDept">
									<div class="dept-title">{{ currentDept.title }}</div>
									<div class="dept-desc">{{ currentDept.deptNote }}</div>
								</div>
							</div>
							<div v-else>
								<div style="min-height: 420px;">
									<div @click="toDetail(item)" v-for="(item, index) in dataList" :key="index"
										class="between-layout intro-item">
										<div style="flex: 1;width: 0;" class="start-layout">
											<div class="intro-dot"></div>
											<div class="intro-name one_line">{{ item.title || item.name }}<span
													v-if="item.position">（{{ item.position }}）</span></div>
										</div>
										<div class="intro-date">{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}</div>
									</div>
								</div>
								<div v-if="total > 0" style="margin-top: 50px;" class="end-layout">
									<el-pagination class="msg-pagination-container" background
										@current-change="handleCurrentChange" :current-page.sync="qureyForm.pageNum"
										:page-size="10" layout="prev, pager, next, jumper" :total="total">
									</el-pagination>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
import {
	getMultiDict,
	getFrontList,
	getMemberList,
	getDept
} from "@/api/index";
export default {
	data() {
		return {
			menuList: [],
			dataList: [],
			routeName: '机构设置',
			currentObj: {
				dictCode: '1817830386937192448',
				dictLabel: '机构设置'
			},
			qureyForm: {
				pageSize: 10,
				pageNum: 1,
				tenantId: process.env.VUE_APP_TENANTID
			},
			total: 0,
			currentDept: {
				title: '政治部',
				deptNote: '负责党组秘书工作，协同市委主管部门和县（市）、区党委做好全市检察机关党的建设和队伍建设工作；开展具有检察特点的思想政治工作，承担全市检察机关的表先奖励工作；组织实施上级人民检察院制定的检察机关有关干部管理规定；协同地方党委对县（市）、区检察院领导班子考核、配备及后备干部的考察工作，办理有关任免手续；负责机构编制及人事、劳资工作；指导县（市）、区检察院的思想政治工作。'
			},
			showDept: false
		}
	},
	created() {
		getMultiDict({
			tenantId: process.env.VUE_APP_TENANTID,
			parentCode: this.$route.query.id
		}).then(res => {
			this.menuList = res.data
		})
		if (this.$route.query.twoId) {
			this.currentObj = {
				dictCode: this.$route.query.twoId,
				dictLabel: this.$route.query.name
			}
			this.getList()
		} else {
			this.getList()
		}
	},
	mounted() {
		window.scrollTo(0, 0);
	},
	methods: {
		getDeptList(item) {
			if (item.children && item.children.length > 0) {
				this.showDept = false
				this.dataList = item.children
			} else {
				this.showDept = true
				this.currentDept = item
			}
		},
		getList() {
			if (this.currentObj.dictCode == '1817830386937192448' || this.currentObj.dictCode ==
				'1817830470227681280') {
				getFrontList(this.qureyForm, {
					typeAncestors: this.currentObj.dictCode
				}).then(res => {
					this.dataList = res.rows
					this.total = res.total
				})
			} else if (this.currentObj.dictCode == '1817835094997295104') {
				getDept(process.env.VUE_APP_TENANTID).then(res => {
					this.showDept = false
					this.dataList = res.data || []
				})
			} else {
				getMemberList(this.qureyForm, {
					typeAncestors: this.currentObj.dictCode
				}).then(res => {
					this.dataList = res.rows
					this.total = res.total
				})
			}
		},
		changeMenu(item) {
			this.currentObj = item
			this.qureyForm.pageNum = 1
			this.getList()
		},
		handleCurrentChange(val) {
			this.qureyForm.pageNum = val
			this.getList()
		},
		//跳转详情
		toDetail(item) {
			this.$router.push({
				name: 'commonDetail',
				query: {
					id: item.baseId,
					name: this.routeName,
					twoName: this.currentObj.dictLabel,
					routePath: '/agencySet',
					routeId: '1817830386937192448',
					type: item.name ? 2 : ''
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
::v-deep .el-icon-location {
	color: #015293 !important;
	font-weight: 400 !important;
	font-size: 22px !important;
	margin-right: 6px;
}

::v-deep .el-icon-arrow-right {
	color: #015293 !important;
	font-weight: 400 !important;
	font-size: 18px !important;
}

/* 不被选中时的颜色 */
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
	color: #015293 !important;
	font-weight: 400 !important;
	font-size: 18px !important;
}

.dept-area {
	.dept-item {
		width: 32%;
		color: #1d1c1c;
		line-height: 50px;
		margin-left: 1%;
		display: block;
		font-size: 18px;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dept-item:hover {
		color: #174D8F;
	}

	.dept-title {
		font-size: 20px;
		color: #000;
		font-weight: 600;
		text-align: center;
		margin: 30px 0;
	}

	.dept-desc {
		text-indent: 2em;
		color: #000;
		line-height: 33px;
		font-size: 20px;
	}
}
</style>